<script setup>
import {ref} from "vue";
const count = ref(0)

const userName = ref('')
const password = ref('')

const obj = ref({id:100,goodsName:'苹果手机'})

obj.value = {id:200,goodsName:'小米手机'}

console.log(obj.value)

function add(){
  //count++ Uncaught TypeError: Assignment to constant variable.
  count.value++ //ref需要使用value去操作 value才是响应式的
}

function login(){
  userName.value = '拼接'+userName.value
  console.log(userName) //RefImpl{__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: '张三', _value: '张三'}
  console.log(password.value) //123456
}

</script>

<template>
  <h4> reactive具有局限性:仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效。 </h4>
  <h4> ref作用类似于reactive </h4>
  count:{{ count }}<br/>
  <button @click="add">累加</button>
  <br/>
  用户名:<input type="text" v-model="userName"><br/>
  密码:<input type="text" v-model="password"><br/>
  <button @click="login">登录</button><br/>

</template>
